<template>
  <div class="app-container">
    <h3>
      <el-button
        type="primary"
        icon="Plus"
        size="small"
        @click="add"
        v-hasPermi="['member:applyMoneySet:add']"
        >添加</el-button
      >
    </h3>
    <x-table :isLoading="tableLoading" :tableData="info" :propList="propList">
      <template #op="scope">
        <el-button
          type="primary"
          link
          icon="Edit"
          @click="change(scope.row)"
          v-hasPermi="['member:applyMoneySet:change']"
          >编辑</el-button
        >
        <el-button
          type="primary"
          link
          icon="Delete"
          @click="del(scope.row)"
          v-hasPermi="['member:applyMoneySet:del']"
          >删除</el-button
        >
      </template>
    </x-table>
    <Dialog
      width="30%"
      title="内容"
      v-model:isShowDialog="isShowDialog"
      @confirm="submit"
    >
      <Form ref="formRef" v-bind="dialogConfig.formConfig"> </Form>
    </Dialog>
    <!-- <Dialog
      width="50%"
      :title="dialogConfig.title"
      v-model="isShowDialog"
      @confirm="submit"
    >
      <Form ref="formRef" v-bind="dialogConfig.formConfig"> </Form>
    </Dialog> -->
  </div>
</template>

<script>
import {
  getList,
  change as changeApplyMoney,
  add as addApplyMoney,
  del as delApplyMoney,
} from "@/api/mpManage/mpApplywithMoneySet";
import { propList, dialogConfig, defaultFormData } from "./config";
export default {
  name: "mpmpConfigmpApplyMoneySetindex",
  data() {
    return {
      info: [],
      isShowDialog: false,
      tableLoading: true,
      propList,
      dialogConfig,
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      this.tableLoading = true;
      const { data } = await getList();
      console.log(data);
      this.info = data.items;
      this.tableLoading = false;
    },
    add() {
      this.isShowDialog = true;
      this.dialogConfig.formConfig.formData = { ...defaultFormData };
      console.log(this.dialogConfig.formConfig.formData, defaultFormData);
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
      });
    },
    change(item) {
      this.dialogConfig.formConfig.formData = { ...item };
      this.isShowDialog = true;
    },
    del(item) {
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {
          return delApplyMoney(item.id);
        })
        .then(() => {
          this.getInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    submit() {
      console.log("submit");
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          console.log(this.dialogConfig.formConfig.formData);
          const formData = this.dialogConfig.formConfig.formData;
          if (formData.id) {
            await changeApplyMoney(formData);
          } else {
            await addApplyMoney(formData);
          }
          this.$message.success("操作成功!");
          this.isShowDialog = false;
          this.getInfo();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
